import React from 'react'
import { Route, Routes, HashRouter, Navigate } from 'react-router-dom'
import Login from './pages/Login'
import NavPage from './pages/NavPage'
const Home = React.lazy(() => import('./pages/Home'))
const Personal = React.lazy(() => import('./Personal/PersonalCenter'))
const Center = React.lazy(() => import('./Personal/Center'))
const User = React.lazy(() => import('./pages/system/User'))
const Role = React.lazy(() => import('./pages/system/Role'))


function App() {

  return (
    <React.Suspense fallback={<div>稍安勿躁，加载中...</div>}>
    <HashRouter>
      <Routes>
        <Route path='/' element={<Navigate to='/login' />} />
        <Route path='login' element={<Login />} />
        <Route path='nav' element={<NavPage />}>
          <Route index element={<Home/>}/>
          <Route path='home' element={<Home/>}/>
          <Route path='personal' element={<Personal/>}/>
          <Route path='center' element={<Center/>}/>
        </Route>
        <Route path='system' element={<NavPage />}>
          <Route path='user' element={<User/>}/>
          <Route path='role' element={<Role/>}/>
          {/* <Route path='center' element={<Center/>}/> */}
        </Route>
      </Routes>
    </HashRouter>
    </React.Suspense>
  )
}

export default App
